<script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { openPaymentModal, checkAccessPermission, calculateDiscountedPrice, formatPrice } from '../utils/paymentUtils.js'

const router = useRouter()

// 模拟用户登录状态和会员等级
const userInfo = ref({
  username: '',
  level: '游客', // 游客、学子会员、传人会员、大师会员
  isLoggedIn: false
})

// 获取Vue应用实例，用于调用全局方法
const app = getCurrentInstance()

// 当前选中的日期
const selectedDate = ref(new Date())
const selectedMonth = ref(selectedDate.value.getMonth())
const selectedYear = ref(selectedDate.value.getFullYear())

// 模拟线上演出数据
const onlinePerformances = [
  {
    id: 1,
    title: '《白蛇传》数字首演',
    date: new Date(2024, 5, 15, 19, 30), // 6月15日
    image: 'https://picsum.photos/id/150/400/300',
    description: '经典剧目《白蛇传》的全新数字演绎版本，融合现代科技与传统艺术。',
    venue: '线上直播',
    ticketTypes: [
      {
        name: '普通座',
        price: 39,
        features: ['720P画质', '单视角'],
        capacity: 200,
        sold: 89
      },
      {
        name: 'VIP座',
        price: 79,
        features: ['1080P高清', '多视角切换', '演出后回放'],
        capacity: 100,
        sold: 45
      },
      {
        name: '贵宾座',
        price: 129,
        features: ['4K超清', '导演实时解说', '多视角', '永久回放权', '数字纪念品'],
        capacity: 50,
        sold: 23
      }
    ],
    category: '传统经典'
  },
  {
    id: 2,
    title: '《新梁山伯与祝英台》',
    date: new Date(2024, 5, 20, 20, 0), // 6月20日
    image: 'https://picsum.photos/id/151/400/300',
    description: '现代改编版《梁祝》，以全新视角诠释这一千古爱情悲剧。',
    venue: '线上直播',
    ticketTypes: [
      {
        name: '普通座',
        price: 39,
        features: ['720P画质', '单视角'],
        capacity: 200,
        sold: 120
      },
      {
        name: 'VIP座',
        price: 79,
        features: ['1080P高清', '多视角切换', '演出后回放'],
        capacity: 100,
        sold: 78
      },
      {
        name: '贵宾座',
        price: 129,
        features: ['4K超清', '导演实时解说', '多视角', '永久回放权', '数字纪念品'],
        capacity: 50,
        sold: 36
      }
    ],
    category: '现代改编'
  },
  {
    id: 3,
    title: '《西游记》特别场',
    date: new Date(2024, 6, 5, 19, 30), // 7月5日
    image: 'https://picsum.photos/id/152/400/300',
    description: '大型奇幻皮影戏《西游记》精彩片段表演，适合全家观看。',
    venue: '线上直播',
    ticketTypes: [
      {
        name: '普通座',
        price: 39,
        features: ['720P画质', '单视角'],
        capacity: 200,
        sold: 0
      },
      {
        name: 'VIP座',
        price: 79,
        features: ['1080P高清', '多视角切换', '演出后回放'],
        capacity: 100,
        sold: 0
      },
      {
        name: '贵宾座',
        price: 129,
        features: ['4K超清', '导演实时解说', '多视角', '永久回放权', '数字纪念品'],
        capacity: 50,
        sold: 0
      }
    ],
    category: '儿童专场'
  }
]

// 模拟线下演出数据
const offlinePerformances = [
  {
    id: 101,
    title: '皮影艺术展',
    startDate: new Date(2024, 5, 10),
    endDate: new Date(2024, 5, 20),
    image: 'https://picsum.photos/id/153/400/300',
    description: '大型皮影艺术展览，展示历史悠久的皮影文化和精美作品。',
    venue: '国家博物馆',
    address: '北京市东城区东长安街16号',
    ticketTypes: [
      {
        name: '普通票',
        price: 59,
        features: ['展览参观', '基础讲解'],
        capacity: 500,
        sold: 0
      },
      {
        name: 'VIP票',
        price: 129,
        features: ['展览参观', '专业讲解', '互动体验', '纪念品'],
        capacity: 100,
        sold: 0
      }
    ],
    sessionTimes: ['09:00-11:00', '14:00-16:00', '19:00-21:00']
  },
  {
    id: 102,
    title: '传统皮影戏专场演出',
    date: new Date(2024, 5, 18, 19, 30),
    image: 'https://picsum.photos/id/154/400/300',
    description: '国家级皮影戏大师现场表演，重现经典剧目。',
    venue: '北京剧院',
    address: '北京市东城区王府井大街22号',
    ticketTypes: [
      {
        name: '普通座',
        price: 180,
        features: ['二楼座位'],
        capacity: 200,
        sold: 0
      },
      {
        name: '优选座',
        price: 380,
        features: ['一楼座位', '节目单'],
        capacity: 150,
        sold: 0
      },
      {
        name: 'VIP座',
        price: 680,
        features: ['前排座位', '节目单', '纪念品', '后台参观'],
        capacity: 50,
        sold: 0
      }
    ]
  }
]

// 演出套餐数据
const performancePackages = [
  {
    id: 1,
    name: '基础套餐',
    price: 199,
    image: 'https://picsum.photos/id/155/300/200',
    features: [
      '3场虚拟演出',
      '1部独家剧目',
      '学子会员身份1个月'
    ],
    value: '原价¥357，立省¥158'
  },
  {
    id: 2,
    name: '豪华套餐',
    price: 499,
    image: 'https://picsum.photos/id/156/300/200',
    features: [
      '全年虚拟演出',
      '5部独家剧目',
      '传人会员6个月'
    ],
    value: '原价¥1299，立省¥800'
  },
  {
    id: 3,
    name: '尊享套餐',
    price: 1299,
    image: 'https://picsum.photos/id/157/300/200',
    features: [
      '线上线下全通',
      '所有独家内容',
      '大师会员1年'
    ],
    value: '原价¥2599，立省¥1300'
  }
]

// 加载用户信息
onMounted(() => {
  const loginStatus = localStorage.getItem('isLoggedIn') === 'true'
  userInfo.value.isLoggedIn = loginStatus
  
  if (loginStatus) {
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      const parsed = JSON.parse(storedUserInfo)
      userInfo.value.username = parsed.username || parsed.phone || ''
      userInfo.value.level = parsed.level || '普通会员'
    }
  }
})

// 计算用户权限
const userPermissions = computed(() => {
  switch (userInfo.value.level) {
    case '学子会员':
      return {
        hasEarlyAccess: true,
        hasSeatPriority: false,
        hasBackstageAccess: false,
        hasDiscount: true,
        discountRate: 0.95
      }
    case '传人会员':
      return {
        hasEarlyAccess: true,
        hasSeatPriority: true,
        hasBackstageAccess: true,
        hasDiscount: true,
        discountRate: 0.9
      }
    case '大师会员':
      return {
        hasEarlyAccess: true,
        hasSeatPriority: true,
        hasBackstageAccess: true,
        hasDiscount: true,
        discountRate: 0.85,
        hasFreeTickets: true
      }
    default:
      return {
        hasEarlyAccess: false,
        hasSeatPriority: false,
        hasBackstageAccess: false,
        hasDiscount: false,
        discountRate: 1
      }
  }
})

// 检查用户是否可以提前购票
const canEarlyPurchase = () => {
  return checkAccessPermission(userInfo.value.level, 'earlyAccess')
}

// 生成日历数据
const generateCalendarDays = () => {
  const daysInMonth = new Date(selectedYear.value, selectedMonth.value + 1, 0).getDate()
  const firstDayOfMonth = new Date(selectedYear.value, selectedMonth.value, 1).getDay()
  const calendarDays = []
  
  // 填充空白日期
  for (let i = 0; i < firstDayOfMonth; i++) {
    calendarDays.push({ date: null, hasPerformance: false })
  }
  
  // 填充当月日期
  for (let day = 1; day <= daysInMonth; day++) {
    const date = new Date(selectedYear.value, selectedMonth.value, day)
    // 检查是否有演出
    const hasOnlinePerformance = onlinePerformances.some(p => 
      p.date.getFullYear() === date.getFullYear() &&
      p.date.getMonth() === date.getMonth() &&
      p.date.getDate() === day
    )
    const hasOfflinePerformance = offlinePerformances.some(p => {
      if (p.date) {
        return p.date.getFullYear() === date.getFullYear() &&
               p.date.getMonth() === date.getMonth() &&
               p.date.getDate() === day
      } else {
        return date >= p.startDate && date <= p.endDate
      }
    })
    
    calendarDays.push({
      date: day,
      hasPerformance: hasOnlinePerformance || hasOfflinePerformance,
      isToday: day === new Date().getDate() &&
               selectedMonth.value === new Date().getMonth() &&
               selectedYear.value === new Date().getFullYear()
    })
  }
  
  return calendarDays
}

const calendarDays = computed(() => generateCalendarDays())

// 处理日期选择
const handleDateSelect = (day) => {
  if (day.date) {
    selectedDate.value = new Date(selectedYear.value, selectedMonth.value, day.date)
  }
}

// 获取当天的演出
const getDayPerformances = computed(() => {
  const performances = []
  
  // 查找线上演出
  const dayOnlinePerformances = onlinePerformances.filter(p => 
    p.date.getFullYear() === selectedDate.value.getFullYear() &&
    p.date.getMonth() === selectedDate.value.getMonth() &&
    p.date.getDate() === selectedDate.value.getDate()
  )
  performances.push(...dayOnlinePerformances)
  
  // 查找线下演出
  const dayOfflinePerformances = offlinePerformances.filter(p => {
    if (p.date) {
      return p.date.getFullYear() === selectedDate.value.getFullYear() &&
             p.date.getMonth() === selectedDate.value.getMonth() &&
             p.date.getDate() === selectedDate.value.getDate()
    } else {
      return selectedDate.value >= p.startDate && selectedDate.value <= p.endDate
    }
  })
  performances.push(...dayOfflinePerformances)
  
  return performances
})

// 处理购票
const handlePurchaseTicket = (performance, ticketType) => {
  // 检查用户是否登录
  if (!userInfo.value.isLoggedIn) {
    router.push('/login')
    return
  }
  
  // 计算最终价格（考虑会员折扣）
  const finalPrice = calculateDiscountedPrice(ticketType.price, userPermissions.value.discountRate)
  
  // 显示购买确认
  if (confirm(`确认购买「${performance.title}」的${ticketType.name}？价格：${formatPrice(finalPrice)}`)) {
    // 打开支付模态框
    openPaymentModal(app?.proxy, {
      id: `${performance.id}_${ticketType.name}`,
      name: `${performance.title} - ${ticketType.name}`,
      price: finalPrice,
      type: 'ticket',
      details: `${performance.date ? formatDate(performance.date) : formatDate(performance.startDate)} ${performance.date ? formatTime(performance.date) : ''} ${performance.venue}`
    })
  }
}

// 处理套餐购买
const handlePurchasePackage = (pkg) => {
  // 检查用户是否登录
  if (!userInfo.value.isLoggedIn) {
    router.push('/login')
    return
  }
  
  // 计算最终价格（考虑会员折扣）
  const finalPrice = calculateDiscountedPrice(pkg.price, userPermissions.value.discountRate)
  
  if (confirm(`确认购买「${pkg.name}」演出套餐？价格：${formatPrice(finalPrice)}`)) {
    // 打开支付模态框
    openPaymentModal(app?.proxy, {
      id: pkg.id.toString(),
      name: pkg.name,
      price: finalPrice,
      type: 'package',
      details: pkg.value
    })
  }
}

// 导航月份
const navigateMonth = (direction) => {
  if (direction === 'prev') {
    selectedMonth.value--
    if (selectedMonth.value < 0) {
      selectedMonth.value = 11
      selectedYear.value--
    }
  } else {
    selectedMonth.value++
    if (selectedMonth.value > 11) {
      selectedMonth.value = 0
      selectedYear.value++
    }
  }
}

// 获取月份名称
const getMonthName = (month) => {
  const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  return months[month]
}

// 格式化日期
const formatDate = (date) => {
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 格式化时间
const formatTime = (date) => {
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
</script>

<template>
  <div class="performance-calendar-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">演出日历</h1>
      <p class="page-subtitle">线上线下精彩演出，尽在掌握</p>
    </div>

    <!-- 会员提示横幅 -->
    <div class="membership-banner">
      <div class="container">
        <div class="banner-content">
          <div class="banner-text">
            <h3>🎫 会员购票特权</h3>
            <p v-if="userInfo.isLoggedIn">
              您当前是 <span class="user-level">{{ userInfo.level }}</span>，
              <template v-if="userPermissions.hasEarlyAccess">
                享受提前购票权和{{ (1 - userPermissions.discountRate) * 100 }}%折扣！
              </template>
              <template v-else>
                升级会员享受购票特权。
              </template>
            </p>
            <p v-else>
              登录后可查看完整演出信息并购票。
            </p>
          </div>
          <div class="banner-actions">
            <button v-if="!userInfo.isLoggedIn" class="btn btn-primary" @click="router.push('/login')">
              立即登录
            </button>
            <button v-else-if="userInfo.level === '游客' || userInfo.level === '普通会员'" 
                    class="btn btn-primary" @click="router.push('/membership')">
              升级会员
            </button>
            <button v-else class="btn btn-outline">
              我的订单
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 日历部分 -->
    <div class="calendar-section container">
      <div class="calendar-header">
        <button class="nav-button" @click="navigateMonth('prev')">‹</button>
        <h2 class="calendar-title">{{ selectedYear }}年 {{ getMonthName(selectedMonth) }}</h2>
        <button class="nav-button" @click="navigateMonth('next')">›</button>
      </div>
      
      <div class="calendar-weekdays">
        <div class="weekday">日</div>
        <div class="weekday">一</div>
        <div class="weekday">二</div>
        <div class="weekday">三</div>
        <div class="weekday">四</div>
        <div class="weekday">五</div>
        <div class="weekday">六</div>
      </div>
      
      <div class="calendar-grid">
        <div 
          v-for="(day, index) in calendarDays" 
          :key="index" 
          class="calendar-day"
          :class="{
            'has-performance': day.hasPerformance,
            'is-today': day.isToday,
            'selected': day.date && selectedDate.getDate() === day.date
          }"
          @click="handleDateSelect(day)"
        >
          <span v-if="day.date" class="day-number">{{ day.date }}</span>
          <span v-if="day.hasPerformance" class="performance-indicator"></span>
        </div>
      </div>
    </div>

    <!-- 当日演出信息 -->
    <div class="day-performances-section container" v-if="getDayPerformances.length > 0">
      <div class="section-header">
        <h2 class="section-title">{{ formatDate(selectedDate) }} 演出安排</h2>
      </div>
      
      <div class="performances-list">
        <div 
          v-for="performance in getDayPerformances" 
          :key="performance.id" 
          class="performance-item"
        >
          <div class="performance-image">
            <img :src="performance.image" :alt="performance.title" class="performance-img" />
            <!-- 会员提前购标识 -->
            <div v-if="userPermissions.hasEarlyAccess" class="early-access-badge">
              会员提前购
            </div>
          </div>
          
          <div class="performance-info">
            <h3 class="performance-title">{{ performance.title }}</h3>
            <div class="performance-meta">
              <span class="meta-item">
                📅 {{ performance.date ? formatDate(performance.date) : `${formatDate(performance.startDate)} - ${formatDate(performance.endDate)}` }}
              </span>
              <span class="meta-item" v-if="performance.date">
                ⏰ {{ formatTime(performance.date) }}
              </span>
              <span class="meta-item">
                📍 {{ performance.venue }}
              </span>
              <span class="meta-item" v-if="performance.address">
                🗺️ {{ performance.address }}
              </span>
              <span class="meta-item" v-if="performance.category">
                🎭 {{ performance.category }}
              </span>
            </div>
            <p class="performance-description">{{ performance.description }}</p>
            
            <!-- 会员特权提示 -->
            <div class="member-benefits" v-if="userInfo.isLoggedIn && userInfo.level !== '游客'">
              <div v-if="userPermissions.hasSeatPriority" class="benefit-item">
                <span class="benefit-icon">💺</span>
                <span>最佳座位预留</span>
              </div>
              <div v-if="userPermissions.hasBackstageAccess" class="benefit-item">
                <span class="benefit-icon">🎭</span>
                <span>后台参观体验</span>
              </div>
              <div v-if="userPermissions.hasDiscount" class="benefit-item">
                <span class="benefit-icon">💰</span>
                <span>{{ (1 - userPermissions.discountRate) * 100 }}%购票折扣</span>
              </div>
            </div>
            
            <!-- 场次信息 -->
            <div class="session-times" v-if="performance.sessionTimes">
              <span class="session-label">场次：</span>
              <span v-for="(session, idx) in performance.sessionTimes" :key="idx" class="session-time">
                {{ session }}
              </span>
            </div>
            
            <!-- 票型选择 -->
            <div class="ticket-types">
              <h4 class="ticket-title">选择票型：</h4>
              <div class="ticket-options">
                <div 
                  v-for="(ticket, idx) in performance.ticketTypes" 
                  :key="idx" 
                  class="ticket-option"
                >
                  <div class="ticket-header">
                    <span class="ticket-name">{{ ticket.name }}</span>
                    <span class="ticket-price">¥{{ (ticket.price * userPermissions.value.discountRate).toFixed(2) }}</span>
                    <span v-if="userPermissions.value.discountRate < 1" class="discount-badge">会员价</span>
                  </div>
                  <div class="ticket-features">
                    <span v-for="(feature, fidx) in ticket.features" :key="fidx" class="feature-item">
                      {{ feature }}
                    </span>
                  </div>
                  <div class="ticket-status">
                    <span class="status-text">
                      剩余 {{ ticket.capacity - ticket.sold }} / {{ ticket.capacity }}
                    </span>
                    <button 
                      class="btn btn-primary btn-sm"
                      @click="handlePurchaseTicket(performance, ticket)"
                      :disabled="ticket.capacity - ticket.sold <= 0"
                    >
                      {{ ticket.capacity - ticket.sold > 0 ? '立即购买' : '已售罄' }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="no-performance container" v-else>
      <p class="no-performance-text">
        {{ formatDate(selectedDate) }} 暂无安排的演出
      </p>
    </div>

    <!-- 演出套餐 -->
    <div class="packages-section container">
      <div class="section-header">
        <h2 class="section-title">🎟️ 演出套餐</h2>
        <p class="section-subtitle">超值组合，享受更多精彩</p>
      </div>
      
      <div class="packages-grid">
        <div v-for="pkg in performancePackages" :key="pkg.id" class="package-card">
          <div class="package-image">
            <img :src="pkg.image" :alt="pkg.name" class="pkg-image" />
          </div>
          <div class="package-info">
            <h3 class="package-name">{{ pkg.name }}</h3>
            <div class="package-price">
              <span class="price">¥{{ pkg.price }}</span>
              <span class="value">{{ pkg.value }}</span>
            </div>
            <ul class="package-features">
              <li v-for="(feature, idx) in pkg.features" :key="idx" class="feature-item">
                <span class="feature-icon">✓</span>
                {{ feature }}
              </li>
            </ul>
            <button 
              class="btn btn-primary"
              @click="handlePurchasePackage(pkg)"
            >
              立即购买
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 页面容器 */
.performance-calendar-container {
  min-height: 100vh;
  background-color: var(--color-background);
}

/* 页面头部 */
.page-header {
  background-color: var(--color-primary);
  color: white;
  padding: 3rem 0;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem 0;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
}

/* 会员提示横幅 */
.membership-banner {
  background-color: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.banner-text h3 {
  margin: 0 0 0.5rem 0;
  color: var(--color-secondary);
}

.banner-text p {
  margin: 0;
  color: var(--color-text);
}

.user-level {
  font-weight: bold;
  color: var(--color-primary);
}

.banner-actions {
  display: flex;
  gap: 1rem;
}

/* 日历部分 */
.calendar-section {
  padding: 2rem 0;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-title {
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-secondary);
}

.nav-button {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-button:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--color-border);
  margin-bottom: 1px;
}

.weekday {
  background-color: var(--color-background-soft);
  padding: 0.8rem;
  text-align: center;
  font-weight: bold;
  color: var(--color-text);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--color-border);
}

.calendar-day {
  background-color: white;
  min-height: 100px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.calendar-day:hover {
  background-color: var(--color-background-soft);
}

.calendar-day.has-performance {
  cursor: pointer;
}

.calendar-day.has-performance:hover {
  background-color: var(--color-primary-light);
}

.calendar-day.is-today {
  background-color: var(--color-primary-light);
  font-weight: bold;
}

.calendar-day.selected {
  background-color: var(--color-primary);
  color: white;
}

.day-number {
  font-size: 1rem;
}

.performance-indicator {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.calendar-day.selected .performance-indicator {
  background-color: white;
}

/* 当日演出信息 */
.day-performances-section {
  padding: 2rem 0;
}

.section-header {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.8rem;
  margin: 0 0 0.5rem 0;
  color: var(--color-secondary);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin: 0;
}

.performances-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.performance-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 2rem;
}

.performance-image {
  flex: 0 0 300px;
  position: relative;
}

.performance-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.early-access-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgba(255, 193, 7, 0.9);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
}

.performance-info {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.performance-title {
  font-size: 1.8rem;
  margin: 0 0 1rem 0;
  color: var(--color-secondary);
}

.performance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  color: var(--color-text-light);
}

.performance-description {
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.member-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  background-color: var(--color-primary-light);
  border-radius: 2rem;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.session-times {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.session-label {
  font-weight: bold;
  color: var(--color-text);
}

.session-time {
  padding: 0.3rem 0.8rem;
  background-color: var(--color-background-soft);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.session-time:hover {
  background-color: var(--color-primary-light);
}

/* 票型选择 */
.ticket-types {
  margin-top: auto;
}

.ticket-title {
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.ticket-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ticket-option {
  flex: 1;
  min-width: 250px;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ticket-option:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.ticket-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--color-secondary);
}

.ticket-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-error);
}

.discount-badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  background-color: var(--color-error);
  color: white;
  border-radius: 4px;
}

.ticket-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.feature-item {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.ticket-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-text {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.no-performance {
  padding: 3rem 0;
  text-align: center;
}

.no-performance-text {
  font-size: 1.2rem;
  color: var(--color-text-light);
}

/* 演出套餐 */
.packages-section {
  padding: 3rem 0;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.package-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.package-image {
  height: 180px;
  overflow: hidden;
}

.pkg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.package-card:hover .pkg-image {
  transform: scale(1.05);
}

.package-info {
  padding: 1.5rem;
}

.package-name {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  color: var(--color-secondary);
}

.package-price {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.package-price .price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-error);
}

.package-price .value {
  font-size: 0.9rem;
  color: var(--color-success);
}

.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.package-features .feature-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.package-features .feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  color: var(--color-success);
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .performance-item {
    flex-direction: column;
  }
  
  .performance-image {
    flex: 0 0 200px;
  }
  
  .calendar-grid {
    font-size: 0.9rem;
  }
  
  .calendar-day {
    min-height: 80px;
  }
  
  .packages-grid {
    grid-template-columns: 1fr;
  }
}
</style>